<template>
  <div class="ServiceAllot">
    <el-form :inline="true" ref="form" :model="form" label-width="80px">
      <div>
        <el-form-item label="客户" style="margin-left: -40px;">
          <el-input v-model="form.clientame"></el-input>
        </el-form-item>
        <el-form-item label="概要">
          <el-input v-model="form.summary"></el-input>
        </el-form-item>
        <el-form-item label="创建日期">
          <el-col :span="24">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.createTime" style="width: 100%;">
            </el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button @click="pageshow" plain>搜索</el-button>
          <el-button @click="showAll" plain>显示全部</el-button>
        </el-form-item>
      </div>
    </el-form>
    <el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" border style="width: 100%">
      <el-table-column prop="Number" label="编号" width="60" type="index">
      </el-table-column>
      <el-table-column prop="clientName" label="客户">
      </el-table-column>
      <el-table-column prop="summary" label="概要">
      </el-table-column>
      <el-table-column prop="serviceType" label="服务类型" :filters="serveType" :filter-method="filterTag"
        filter-placement="bottom-end">
      </el-table-column>
      <el-table-column prop="creatName" label="创建人">
      </el-table-column>
      <el-table-column prop="createTime" label="创建日期">
      </el-table-column>
      <el-table-column prop="allotfor" label="分配给" width="120">
        <template slot-scope="scope">
          <el-select v-model="scope.row[scope.column.property]" placeholder="请选择" @visible-change="getManagerOptios()"
            clearable filterable>
            <el-option v-for="customer in managerOptions" :key="customer.id" :label="customer.username"
              :value="customer.id"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="allot" width="100">
        <template slot-scope="scope">
          <el-row>
            <el-button type="primary" @click="onSubmit(scope.$index, scope.row)">分配</el-button>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="60">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleDelete(scope.$index, scope.row)" class="el-icon-error">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[5, 10, 20, 40]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    name: "ServiceAllot",
    props: ["msg"],
    data() {
      return {
        juese: '',
        userId: '',
        currentPage: 1, //初始页
        pagesize: 5, //    每页的数据
        form: {},
        tableData: [],
        serveType: [],
        serveState: [],
        stars: 1,
        index: "",
        state: "",
        managerOptions: []
      };
    },
    mounted() {
      this.pageshow();
    },
    methods: {
      filterTag(value, row) {
        return row.serviceType === value;
      },
      showAll() {
        this.form = {};
        this.pageshow();
      },
      pageshow() {
        this.$http
          .get("/serveList/serviceHandle", {
            params: {
              name: this.form.clientame,
              summry: this.form.summary,
              createTime: this.form.createTime,
              from: 1
            }
          })
          .then(response => {
            this.tableData = response.data.data;
          })
          .catch(function (error) {
            console.log(error);
          });
      }, handleDelete(index, row) {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          console.log(this.tableData.records);
          this.tableData.splice(index, 1);
          this.tableData.total--;
          this.sendeRequest('delete', 'serveList/serviceAllotDel', { id: row.id });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      handleSizeChange(size) {
        this.pagesize = size;
      },
      onSubmit(index, row) {
        if (row.allotfor === null || row.allotfor === '') {
          this.$message({
            type: 'warning',
            message: '请指定分配的客户经理！'
          });
          return;
        }
        row.state = 2;
        row.assignedTime = this.getNowFormatDate();
        this.sendeRequest('put', '/serveList/serviceUpdate', row);
      },
      handleCurrentChange(currentPage) {
        this.currentPage = currentPage;
      },
      getManagerOptios() {
        let _this = this;
        if (_this.managerOptions.length == 0) {
          _this.$http.get("/serveList/sysUserInfo").then(function (ret) {
            if (ret.data.code == 0) {
              _this.managerOptions = ret.data.data;
              console.log(ret);
            } else {
              _this.managerOptions.push = ["暂无数据"];
            }
          });
        }
      },
      sendeRequest(method, url, param) {
        //实现更新请求的代码复用
        let _this = this;
        param = method == "delete" ? { params: param } : param;
        this.$http[method](url, param).then(function (ret) {
          if (ret.data.code == 0) {
            _this.$notify({
              title: ret.data.msg,
              message: "😀",
              type: "success"
            });
            _this.pageshow();
          } else {
            _this.$notify.error({
              title: ret.data.msg,
              message: "😭",
              type: 'error'
            });
          }
        });
      }, getNowFormatDate() {//获取当前时间
        var date = new Date();
        var seperator1 = "-";
        var seperator2 = ":";
        var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
        var strDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate;
        return currentdate;
      }
    }
  };
</script>

<style>
</style>